import React from 'react';
import PageScaffold from './PageScaffold';
import { getChipsWithPrimary } from '../utils/chipConfig';

export default function ReactionDiffusionEmpty() {
  const chips = getChipsWithPrimary('反应-扩散', '/reaction-diffusion-empty');

  return (
    <PageScaffold
      chips={chips}
      left={(
        <div>
          <h2 style={{ marginTop: 0, marginBottom: 20 }}>反应-扩散</h2>
          <div style={{ display: 'flex', gap: 8, marginBottom: 20 }}>
            <button style={{ padding: '8px 16px', border: 'none', background: '#2b8a6e', color: 'white', borderRadius: 8, fontWeight: 500 }}>区域</button>
            <button style={{ padding: '8px 16px', border: 'none', background: 'transparent', color: '#6b7280', borderRadius: 8 }}>种类</button>
            <button style={{ padding: '8px 16px', border: 'none', background: 'transparent', color: '#6b7280', borderRadius: 8 }}>状态</button>
            <button style={{ padding: '8px 16px', border: 'none', background: 'transparent', color: '#6b7280', borderRadius: 8 }}>参数</button>
            <button style={{ padding: '8px 16px', border: 'none', background: 'transparent', color: '#6b7280', borderRadius: 8 }}>反应</button>
            <button style={{ padding: '8px 16px', border: 'none', background: 'transparent', color: '#6b7280', borderRadius: 8 }}>多室反应</button>
            <button style={{ padding: '8px 16px', border: 'none', background: 'transparent', color: '#6b7280', borderRadius: 8 }}>速率</button>
            <button style={{ padding: '8px 16px', border: 'none', background: 'transparent', color: '#6b7280', borderRadius: 8 }}>细胞外</button>
          </div>
          <div className="list" style={{ alignItems:'center', justifyContent:'center', minHeight: 300 }}>
            <div style={{ textAlign:'center', padding:'40px 0' }}>
              <div style={{ fontSize:18, color:'#6b7280', marginBottom:24 }}>目前暂未添加区域</div>
              <button className="btn-circle" style={{ width: 48, height: 48, fontSize: 24 }}>＋</button>
            </div>
          </div>
        </div>
      )}
      right={(
        <div className="list"></div>
      )}
    />
  )
}

